<template>
    <view class="workerDetails">
        <view class="topbox">
            <view class="ren vh-ss">
                <image :src="detail.avatar"></image>
                <view>
                    <view class="name">
                        {{detail.name}}
                    </view>
                    <view class="num">
                        {{detail.phone}}
                    </view>
                </view>
            </view>
            <view class="jianjieBox">
                <view class="guigebox">
                    <text> 工龄{{detail.serviceLength?detail.serviceLength:0}}年</text>
                    <text>接单量{{detail.count?detail.count:0}}</text>
                </view>
                <view class="lybox">
                    <image src="../../static/imgs/ly.png"></image>
                </view>
                <view class="content">
                    {{detail.skill}}

                </view>
                <view class="rybox">
                    <image src="../../static/imgs/ry.png"></image>
                </view>
            </view>
        </view>
        <!-- <view class="vh-c pingBox">
            <view class="hpBox vh-c">
                <image src="../../static/imgs/hping.png"></image>56 好评
            </view>
            <view class="cpBox vh-c">
                <image src="../../static/imgs/cping.png"></image>56 差评
            </view>
        </view> -->
        <view class="alBox" v-show="detail.promotionRecordsList.length">
            <view class="title">施工范例展示</view>
            <view v-show="detail.promotionRecordsList.length">

                <view class="anliITem" v-for="(item,index) in detail.promotionRecordsList" :key="index">
                    <u-scroll-list :indicator="false">
                        <view v-for="item2 in  imgStringtoList(item.images)" :key="item2.id"  @click="showBigImg(item2)">
                            <image :src="item2"></image>
                        </view>
                    </u-scroll-list>
                    <view v-if="item.address">施工地址：{{item.address}}</view>
                    <view v-if="item.constructionTime">施工时间：{{item.constructionTime}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [{
                thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
            }, {
                thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
            }, {
                thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
            }, {
                thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
            }, {
                thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
            }],
            id: '',
            detail: {}
        }
    },
    
    // onShareAppMessage(res) {
    //     return {
    //         title: 'lalala',
    //         path: `/pages/workerDetails/workerDetails`
    //     }
    // },
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        this.id = option.id
        this.gotodetail()
    },
    //方法
    methods: {
        imgStringtoList(item){
            return  item.split(',')
        },
        gotodetail() {
            this.$http.get('/app/recommender_info/' + this.id).then(val => {
                this.detail = val.data
            })
        },
        showBigImg(url,b,c){
            // console.log(url,b,c)
            this.$showBigImg(url)
        }
    }
}
</script>

<style lang="scss">
.workerDetails {
    background: url("https://lgqj.oss-cn-beijing.aliyuncs.com/2022/05/06/165183859441866d5a48a8e626fc6e94d4a413d90686.png")
        #fff no-repeat;
    background-size: 100%;
    min-height: 100vh;
    padding: 32rpx;
    .topbox {
        .ren {
            padding: 0 30rpx;
            position: relative;
            bottom: -30rpx;
            image {
                margin-right: 40rpx;
                width: 100%;
                width: 180rpx;
                height: 180rpx;
                border-radius: 50%;
                box-shadow: 0px 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
                border: 6rpx solid #ffffff;
            }
            .name {
                font-size: 40rpx;
                font-weight: 600;
                color: #ffffff;
                line-height: 2;
            }
            .num {
                font-size: 30rpx;
                font-weight: 400;
                color: #ffffff;
                line-height: 2;
            }
        }
        .jianjieBox {
            background: #ffffff;
            box-shadow: 0px 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 20rpx;
            border: 1rpx solid $themeColor;
            padding: 20rpx;
        }
        .guigebox {
            text-align: end;
            text {
                background: #f1f6ff;
                border-radius: 8rpx;
                border: 1rpx solid $themeColor;
                padding: 5rpx 15rpx;
                margin-right: 10rpx;
                color: $themeColor;
                font-size: 26rpx;
            }
        }
        .lybox {
            image {
                width: 39rpx;
                height: 32rpx;
            }
        }
        .content {
            font-size: 30rpx;
            font-weight: 400;
            color: #333333;
            line-height: 42rpx;
            padding: 0 40rpx;
        }
        .rybox {
            justify-content: flex-end;
            display: flex;
            image {
                width: 39rpx;
                height: 32rpx;
            }
        }
    }
    .pingBox {
        font-size: 26rpx;
        font-weight: 600;
        line-height: 37rpx;
        letter-spacing: 1rpx;
        margin-top: 20rpx;
        .hpBox {
            width: 250rpx;
            color: #ff7300;
            background: #fff8e7;
            border-radius: 300rpx;
            border: 1rpx solid #ffa200;
            padding: 10rpx 20rpx;
            margin: 10rpx;
        }
        .cpBox {
            background: #fff5f4;
            border-radius: 300rpx;
            border: 1rpx solid #f24032;
            color: #f24032;
            padding: 10rpx 20rpx;
            margin: 10rpx;
        }
        image {
            width: 67rpx;
            height: 56rpx;
            margin-right: 20rpx;
        }
    }
    .alBox {
        .title {
            margin-top: 20rpx;
            font-size: 36rpx;
            font-weight: 600;
            color: #333333;
            line-height: 50rpx;
        }
        .anliITem {
            padding: 10rpx;
            margin-top: 20rpx;
            font-size: 30rpx;
            font-weight: 400;
            color: #6d6d6d;
            line-height: 1.5;
            image {
                width: 252rpx;
                height: 179rpx;
                border-radius: 20rpx;
                margin-right: 20rpx;
            }
        }
    }
}
</style>